<!-- template: list.html -->
{% extends 'base.html' %}
{% load thumbnail %}
{% block content %}
    <div class="row">
        <div class="col-md-6"><span class=" label label-primary">型号：{{ wheel_type }}</span></div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered">
                <caption>选择轮毂型号</caption>
                <thead>
                <tr>
                    <th>/</th>
                    <th>美国</th>
                    <th>韩国</th>
                    <th>巴西</th>
                    <th>印度</th>
                </tr>
                </thead>
                <tbody>
                {#        16# 17# 18# 19#}
                <tr>
                    <td>16"</td>
                    <td id="p11"><img class="img-responsive" src="" width="100"></td>
                    <td id="p12"><img class="img-responsive" src=""></td>
                    <td id="p13"><img class="img-responsive" src=""></td>
                    <td id="p14"><img class="img-responsive" src=""></td>
                </tr>
                <tr>
                    <td>17"</td>
                    <td id="p21"><img class="img-responsive" src=""></td>
                    <td id="p22"><img class="img-responsive" src=""></td>
                    <td id="p23"><img class="img-responsive" src=""></td>
                    <td id="p24"><img class="img-responsive" src=""></td>
                </tr>
                <tr>
                    <td>18"</td>
                    <td id="p31"><img class="img-responsive" src=""></td>
                    <td id="p32"><img class="img-responsive" src=""></td>
                    <td id="p33"><img class="img-responsive" src=""></td>
                    <td id="p34"><img class="img-responsive" src=""></td>
                </tr>
                <tr>
                    <td>19"</td>
                    <td id="p41"><img class="img-responsive" src=""></td>
                    <td id="p42"><img class="img-responsive" src=""></td>
                    <td id="p43"><img class="img-responsive" src=""></td>
                    <td id="p44"><img class="img-responsive" src=""></td>
                </tr>
                </tbody>

            </table>
        </div>
    </div>

    <div id="data" hidden>{{ data }}</div>
    <!-- Modal structure -->
    <div id="wheel_list" data-izimodal-title="选择"></div>
    {#    通知#}
    <div id="notify"></div>
    <form>
        {% csrf_token %}
        <button id="btn_history_update" hidden></button>
    </form>
{% endblock %}
{% block script %}
    <script>
        $(document).ready(function (data) {
            var index = "";

            // 填表
            var tbl_data = $("#data").html();
            var json = JSON.parse(tbl_data);
            for (var i = 0; i < json.length; i++) {
                $("#" + json[i].index).find("img").attr('src', json[i].image_top);

                {#$("#" + json[i].index).html(#}
                {#    '{% thumbnail ' + json[i].image_top + ' "300x300" as im %} <img src="{{ im.url }} \#}
                {#        ">{% endthumbnail %}'#}
                {#);#}
                console.log("#" + json[i].index);
                //console.log($("#" + json[i].index).html());
                // 本地保存
                localStorage.setItem(json[i].index, json[i].id);
            }

            // 表格单元双击：轮型选择
            var td_clicked = $("td");
            td_clicked.dblclick(function (evt) {
                evt.preventDefault();
                var id = $(this).attr("id");
                index = id;
                if (typeof(id) !== 'undefined') {
                    // 请求数据
                    var m = $("#wheel_list");
                    m.iziModal({
                        padding: 20,
                        headerColor: '#2fb974',
                        onOpening: function (modal) {
                            modal.startLoading();
                            $.get('/read/' + index, function (data) {
                                m.find(".iziModal-content").html(data);
                                modal.stopLoading();
                            });
                        },
                        onClosed: function (modal) {
                            $("#btn_history_update").click();
                        }

                    });
                    m.iziModal('open');
                    // if
                }
            }); // td

            // 表格单元单击：打印画面
            td_clicked.click(function () {
                var index_clicked = $(this).attr("id");
                //console.log(index_clicked);
                var index = localStorage.getItem(index_clicked);
                if (typeof (index) === "undefined" || index == null) {
                    console.log("无位置索引值");
                    return false;
                }
                // 跳转
                $(location).attr("href", "/confirm/" + index);
            });

            $("#btn_history_update").click(function (evt) {
                evt.preventDefault();
                // 读存储
                var id = sessionStorage.getItem("id");
                var image_url = sessionStorage.getItem("image_url");
                var wheel_size = sessionStorage.getItem("wheel_size");
                console.log("id:" + id + ", image:" + image_url);
                if (id === "" || image_url === "" || wheel_size === "")
                    return false;
                // 更新history
                // csrf
                var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();

                // console.log('csrf:' + csrftoken);

                function csrfSafeMethod(method) {
                    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
                }

                $.ajaxSetup({
                    beforeSend: function (xhr, settings) {
                        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrftoken);
                        }
                    }
                });

                $.post(
                    '/history_update/' + index + '/',
                    {
                        "wheel_id": id,
                        "index": index,
                        "wheel_size": wheel_size,
                        "image_top": image_url

                    },
                    function (data) {
                        var notify = $("#notify");
                        notify.iziModal('setContent', data.status); // 设置内容
                        notify.iziModal({
                            padding: 20,
                            headerColor: '#2fb974',
                            timeout: 2000,
                            title: '通知'

                        });
                        notify.iziModal('open');
                    }
                );
            });

        });
    </script>
{% endblock %}